<template>
  <a-drawer
    width="65%"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    title="投资项目管理"
    class="form-drawer"
  >
    <a-form-model
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="form-model"
    >
      <a-form-model-item label="项目名称：" prop="name">
        <a-input v-model="ruleForm.name" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="金融产品：" prop="productCode">
        <FinancialSelect v-model="ruleForm.productCode" />
      </a-form-model-item>
      <a-form-model-item label="标的公司："  class="is-required">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item prop="brandCode">
              <BrandSelect v-model="ruleForm.brandCode" placeholder="请选择" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-if="ruleForm.brandCode">
            <a-form-model-item prop="storeCode">
              <storeSelect v-model="ruleForm.storeCode" :brandCode="ruleForm.brandCode" placeholder="请选择投资店铺" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="融资金额：" prop="financingAmount">
        <a-input-number v-model="ruleForm.financingAmount" :min="0" />
      </a-form-model-item>
      <a-form-model-item label="资方：" prop="capitalCode">
        <CapitalSelect v-model="ruleForm.capitalCode" />
      </a-form-model-item>
      <a-form-model-item label="投资金额：" prop="investAmount">
        <a-input-number v-model="ruleForm.investAmount" :min="0" />
      </a-form-model-item>
      <!-- <a-form-model-item label="履约时间：" prop="_dateRange">
        <a-range-picker @change="onChange" v-model="ruleForm._dateRange" />
      </a-form-model-item> -->
      <a-form-model-item label="履约开始时间" prop="performanceStartTime">
        <a-date-picker @change="onChange" v-model="ruleForm.performanceStartTime" style="width:100%" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 18, offset: 3 }">
        <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
        <a-button @click="onClose">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { setProjectAddOrEdit, getProjectInfo } from '@/api/invest'
import CapitalSelect from '@/myComponents/capital-select'
import BrandSelect from '@/myComponents/brand-select.vue'
import FinancialSelect from '@/myComponents/financial-select'
import storeSelect from '@/myComponents/store-select'
import moment from 'moment'
// import {checkZsNum} from "@/utils/index"
export default {
  name: 'ProjectForm',
  data() {
    return {
      visible: false,
      ruleForm: {
        name: '',
        productCode: undefined,
        brandCode: undefined,
        financingAmount: 0,
        capitalCode: undefined,
        storeCode: undefined,
        investAmount: 0,
        _dateRange: [],
        performanceStartTime: '',
        performanceEndTime: ''
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      rules: {
        name: [{ required: true, message: '项目名称不能为空' }],
        productCode: [{ required: true, message: '金融产品不能为空' }],
        brandCode: [{ required: true, message: '标的公司不能为空' }],
        financingAmount: [{ required: true, message: '融资金额不能为空' }],
        capitalCode: [{ required: true, message: '资方不能为空' }],
        storeCode: [{ required: true, message: '投资店铺不能为空' }],
        investAmount: [{ required: true, message: '投资金额不能为空' }],
        performanceStartTime: [{ required: true, message: '履约开始时间不能为空' }]
      },
      submitLoading: false
    }
  },
  methods: {
    onChange(val, dateString) {
      console.log(val, dateString, 'onChange')
      // this.ruleForm.performanceStartTime = moment()
      this.ruleForm._dateRange = [moment(val, 'YYYY-MM-DD'), moment(val, 'YYYY-MM-DD')]
    },
    open(record = {}) {
      if (record.id) {
        getProjectInfo(record.id).then((res) => {
          res.data._dateRange = [res.data.performanceStartTime, res.data.performanceEndTime]
          this.ruleForm = res.data
        })
      }
      this.visible = true
    },
    onClose() {
      this.visible = false
    },
    afterVisibleChange(val) {
      if (!val) {
        this.ruleForm = {
          name: '',
          productCode: '',
          brandCode: '',
          financingAmount: 0,
          capitalCode: '',
          investAmount: 0,
          _dateRange: [],
          performanceStartTime: '',
          performanceEndTime: ''
        }
      }
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          let [startTime, endTime] = this.ruleForm._dateRange
          setProjectAddOrEdit({
            ...this.ruleForm,
            performanceStartTime: moment(startTime).format('YYYY-MM-DD'),
            // performanceEndTime: moment(endTime).format('YYYY-MM-DD')
          })
            .then((res) => {
              this.$notification['success']({
                message: '提示',
                description: `${this.ruleForm.id ? '编辑' : '新增'}成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
            .catch(() => {
              this.submitLoading = false
            })
        }
      })
    }
  },
  components: {
    CapitalSelect,
    BrandSelect,
    FinancialSelect,
    storeSelect
  }
}
</script>

<style></style>
